<template>
  <div class="box">
    <div class="connect" id="activity-list">
      <ul class="connect-list">
        <li v-for="(v, index) in animationActivityData" :key=v.id @click="linkActivity(v)">
          <img :src="v.iconUrl">
        </li>
      </ul>
      <div class="btn" @click="clickAnimationActivity"><img :src="btnSrc"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    animationActivityData: Object,
    offAnimationNum: Number,//关闭动画
    activityHomeIcon: String,//活动配置图标
  },
  data() {
    return {
      onOff: true, //开关
      btnSrc: '', //按钮图片
    }
  },
  watch: {
    offAnimationNum() {
      this.animationFun()
    }
  },
  created() {
    if (this.animationActivityData.length == '1') {
      this.btnSrc = this.animationActivityData[0].iconUrl || require('@/assets/images/active/active-home.png');
    } else {
      this.btnSrc = this.activityHomeIcon || require('@/assets/images/active/active-home.png');
    }
  },
  mounted() {

  },
  methods: {
    linkActivity(v) {
      let { id, elementType, elementId } = v;
      fun.activityDotNumFun(0, id);
      fun.activityDotNumFun(1, id, '0', elementType, elementId)
      let data = v.hzbActivityList[0];
      if (window.terminal.weixin) { //weixin
        for (let i = 0; i < data.targetList.length; i++) {
          if (data.targetList[i].targetType == 1) {
            const url = data.targetList[i].linkUrl
            window.location.href = url;
            this.animationFun()
            this.$store.dispatch("globalMask", {
              isShow: false,
              bgColor: ''
            });
            break;
          } else {
            //console.log('当前跳转url只支持app')
          }
        };
      } else { //app
        for (let i = 0; i < data.targetList.length; i++) {
          if (data.targetList[i].targetType == 0) {
            const url = data.targetList[i].linkUrl
            if(window.terminal.isZxjtqhApp){
               fun.zxjtqhLinkUrl(url)
            }else{
              window.location.href = url;
            }            
            this.animationFun()
            this.$store.dispatch("globalMask", {
              isShow: false,
              bgColor: ''
            });
            break;
          } else {
            //console.log('当前跳转url只支持微信')
          }
        };
      }
    },
    clickAnimationActivity() {
      if (this.animationActivityData.length == '1') {
        let {
          id,
          elementType,
          elementId
        } = this.animationActivityData[0];
        let data = this.animationActivityData[0].hzbActivityList[0];
        fun.activityDotNumFun(0, id);
        fun.activityDotNumFun(1, id, '0', elementType, elementId)
        if (window.terminal.weixin) { //weixin
          for (let i = 0; i < data.targetList.length; i++) {
            if (data.targetList[i].targetType == 1) {
              window.location.href = data.targetList[i].linkUrl;
              break;
            } else {
              //console.log('当前跳转url只支持app')
              //break;
            }
          };
        } else { //app
          for (let i = 0; i < data.targetList.length; i++) {
            if (data.targetList[i].targetType == 0) {
              const url = data.targetList[i].linkUrl
              if(window.terminal.isZxjtqhApp){
                fun.zxjtqhLinkUrl(url)
              }else{
                window.location.href = url;
              }    
              break;
            } else {
              //console.log('当前跳转url只支持微信')
              //break;
            }
          };
        }
      } else {
        this.animationFun()
      }
    },
    animationFun() {
      let _this = this;
      let activityList = document.getElementById("activity-list");
      let oLis = activityList.querySelector(".connect-list").querySelectorAll("li");
      if (this.onOff) {
        for (let i = 0; i < oLis.length; i++) {
          oLis[i].style.transition = "0.5s " + 100 * i + "ms";
          oLis[i].style.transform = 'scale(0.8)'
          oLis[i].style.opacity = '1';
          oLis[i].style.top = -180 + "px";
          oLis[i].style.left = (-document.body.clientWidth / oLis.length * i) - (document.body.clientWidth / oLis
            .length / 2 + 12) + 'px';
        };
        document.querySelector(".btn").style.transform = "rotate(-360deg)";
        this.$store.dispatch("globalMask", { isShow: true, bgColor: 'rgba(0,0,0,0.5)' });
      } else {
        for (let i = 0; i < oLis.length; i++) {
          oLis[i].style.transition = "0.8s " + 100 * (oLis.length - i - 1) + "ms";
          oLis[i].style.transform = 'scale(0.5)'
          oLis[i].style.opacity = '0';
          oLis[i].style.top = -80 + "px";
          oLis[i].style.left = -75 + "px";
        }
        this.$store.dispatch("globalMask", { isShow: false, bgColor: '' });
        document.querySelector(".btn").style.transform = "rotate(0deg)";
      }
      this.onOff = !this.onOff
    }
  }
}
</script>

<style scoped="scoped">
.connect {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 220px;
}

.connect-list {
  width: 42px;
  height: 42px;
  position: relative;
}

.connect-list li {
  cursor: pointer;
  margin: 4px;
  color: #fff;
  line-height: 42px;
  text-align: center;
  width: 178px;
  height: 178px;
  position: absolute;
  top: -150px;
  left: -150px;
  border-radius: 21px;
  transform: scale(0.35);
  opacity: 0.5;
  -webkit-transition: 1s ease-in-out all;
  transform-origin: center center;
  /* background: #006EFF; */
}

li img {
  width: 178px;
  height: 178px;
}

.btn {
  -webkit-transition: 1s all;
  width: 200px;
  height: 200px;
  position: absolute;
  right: 10px;
  bottom: 40px;
  border-radius: 25px;
  line-height: 200px;
  text-align: center;
}

.btn img {
  width: 200px;
  height: 200px;
}

.box {
  position: fixed;
  right: 7px;
  bottom: 270px;
  z-index: 1502;
}
</style>
